<template>
  <aside>
    <div class="menu-search">
      <div>
        <el-input
          v-model="menuName"
          :placeholder="$t('placeholder.navSearch')"
          :suffix-icon="Search"
        />
      </div>
    </div>
    <div class="menu-list">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :unique-opened="true"
      >
        <el-sub-menu
          v-for="item in menuList"
          :key="item.categoryId"
          :index="'1-' + item.categoryId"
        >
          <template #title>
            <i class="iconfont ic-build-1"></i>
            <span>{{ item.categoryName[currentGlobalLang] }}</span>
            <span class="num">455645</span>
          </template>

          <el-sub-menu
            :index="'2-' + el.categoryId"
            v-for="el in item.children"
            :key="el.categoryId"
          >
            <template #title>
              <i v-if="el.children" class="iconfont ic-triangle-right"></i>
              <span>{{ el.categoryName[currentGlobalLang] }}</span>
              <span class="num">455645</span>
            </template>
            <el-menu-item
              :index="'3-' + deep.categoryId"
              v-for="deep in el.children"
              :key="deep.categoryId"
            >
              <template #title>
                <span>{{ deep.categoryName[currentGlobalLang] }}</span>
                <span class="num">455645</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
      </el-menu>
    </div>
  </aside>
</template>
<script>
import { dataMiddleGroundBaseCategoryCategoryList } from "@/api/data-middleground-base/base/category";
import { currentGlobalLang } from "@/locale";
import { totree } from "@/utils/tree";
import { Search } from "@element-plus/icons-vue";
export default {
  data() {
    return {
      menuList: [],
      currentGlobalLang: currentGlobalLang,
      menuName: "",
    };
  },
  setup() {
    return {
      Search,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //数据初始化
    init() {
      this.getListNav();
    },
    //获取左侧栏目
    async getListNav() {
      const res = await dataMiddleGroundBaseCategoryCategoryList();
      let data = res.map((item) => {
        item.categoryName = JSON.parse(item.categoryName);
        return item;
      });
      this.menuList = totree(data, 0);
    },
  },
};
</script>
<style scoped lang="scss">
aside {
  width: 480px;
  height: 100%;
  padding: 16px 0;
  background: #fff;
  :deep(.menu-search) {
    padding: 0 20px;
    height: 32px;
    margin-bottom: 8px;
    .el-input {
      --el-input-bg-color: rgba(242, 243, 245, 1);
      .el-input__inner {
        border-color: rgba(242, 243, 245, 1);
      }
    }
  }
  :deep(.menu-list) {
    height: calc(100% - 32px);
    overflow-y: auto;
    .el-menu {
      border-right: none;
      --el-menu-item-height: 64px;
      .el-menu--inline {
        padding-left: 36px;
        .el-sub-menu__title {
          padding-left: 15px !important;
        }
        .el-menu-item {
          padding-left: 35px !important;
        }
        .is-opened {
          .ic-triangle-right {
            transform: rotate(90deg);
          }
        }
      }
      .el-menu--inline {
        --el-menu-item-height: 48px;
      }
      .el-menu-item {
        height: 48px;
      }
      .el-sub-menu__title {
        padding: 0 24px;
      }
      .el-icon {
        display: none;
      }
      .ic-build-1 {
        width: 48px;
        height: 48px;
        line-height: 48px;
        border-radius: 4px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        background: map-get($map: $fill-color, $key: deep);
        margin-right: 12px;
      }
      .ic-triangle-right {
        margin-right: 18px;
      }
      .is-opened {
        .ic-build-1 {
          background: map-get($map: $bg-primary, $key: static);
        }
      }
    }
  }

  .num {
    position: absolute;
    top: 0;
    right: 30px;
  }
}
</style>
